<template>
  <el-dialog :title="form.id == 0?'增加':'修改'" :visible.sync="showFlag.status">
    <el-form :model="form" label-width="100px" :rules='rules' ref="sortRef">
      <el-form-item label="上级分类" prop="pid">
        <el-select v-model="form.pid" placeholder="请选择活动区域">
          <el-option label="顶级分类" :value="0"></el-option>
          <el-option v-for="sort in sortList" :key="sort.id" :label="sort.catename" :value="sort.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称" prop="catename">
        <el-input v-model="form.catename" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item v-if="form.pid != 0" label="分类图片">
        <el-upload ref="uploadRef" action="#" list-type="picture-card" :auto-upload="false" :on-change="fileChange">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="分类状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="submit">取 消</el-button>
      <el-button type="primary" @click="submit"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import vm from '../../vm/vm'
export default {
  props: ["sortList","showFlag"],  
  created(){
    vm.$on("editSort",(res)=>{
      //打开模态框
      this.showFlag.status = true
      //添加数据
      this.form = res
      //添加图片
      console.log(res)
      setTimeout(()=>{
          this.$refs.uploadRef.fileList.push({url: "http://127.0.0.1:3000/"+res.img})
        },500)  
    })
  },
  methods: {
      submit(){
          this.$refs["sortRef"].validate(
              valid=>{
                  const fd = new FormData()
                  for(let key in this.form){
                       fd.append(key,this.form[key])
                  }
                  
                  var url = this.form.id == 0?"/cateadd":'/cateedit'
                  this.$http.post(url,fd).then(
                      res=>{
                          //清空表单
                          this.form = {
                              id: 0,  
                              pid: 0,
                              catename: "",
                              img: "",
                              status: 1
                          }
                          //清空图片
                          this.$refs["uploadRef"].clearFiles()
                          //关闭模态框
                          this.showFlag.status = false
                          //刷新页面
                          this.$emit("updateSort")
                      },
                  )
              }
          )
      },

      fileChange(file){
          this.form.img = file.raw
      },
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      }
  },  
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      form: {
        id: 0,  
        pid: 0,
        catename: "",
        img: "",
        status: 1
      },
      rules: {
          pid:{required: true, message: "分类不可以为空", trigger: "blur"},
          catename:{required: true, message: "名称不可以为空", trigger: "blur"},
          status:{required: true, message: "状态不可以为空", trigger: "blur"},
      }
    };
  }
};
</script>

<style>
</style>